<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<input type="button" value="post交互">
<span></span>
<script>
window.onload = function () {
	document.querySelector('input').onclick=function () {

		//利用XMLHttpRequet
	    //1.创建对象
	  var xhr = new XMLHttpRequest();
	  //2.打开链接
	  xhr.open('POST','post.php');
	  //3.发送数据
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send("username=lining");
	  //4.接收数据,只能通过异步方式，就是只能通过回调函数的方式
	  //时刻监听服务器状态的改变
	  xhr.onreadystatechange = function () {
	  	//服务器响应会调这个函数
	    if(xhr.readyState===4 && xhr.status===200){

				var data = xhr.responseText;
			    document.querySelector("span").innerHTML = data;

	    	//console.log(xhr.status);
	    }
	    // console.log(xhr.readyState)

	  }

	};
}
</script>
</body>
</html>